<template>
	<!-- 积分商城---订单详情 -->
	<view class="myorder_container">

		<!-- 订单时间 -->
		<view class="myorder_container_title">
			<view class="myOrder_num">
				<view>订单编号：</view>
				<view>{{formData.orderNo}}</view>
			</view>
			<view> {{formData.redeemTime}}</view>
		</view>
		<!-- 订单详情-->
		<view class="myorder_container_details">
			<view class="storeDetail">商品详情</view> 
			<view class="storeGet">
				{{ winStatusFormat(formData) }}
			</view>
		</view>
		<!-- 订单内容 -->
		<view class="myorder_container_Pics">
			<view class="container_details">
				<image :src="formData.product.imgurl" class="pics"></image>
				<view class="container_details_title">
					<view class="details_title">{{formData.product.name}}</view>
					<view class="details_result">{{formData.product.integral}}</view>
				</view>
			</view>
			<view>X{{formData.exchangeCount}}</view>
		</view>
		<!-- 订单积分 -->
		<view class="myorder_container_total">
			<view class="myorder_total_title"> 订单总积分：</view>
			<view class="myorder_total_num">{{formData.totalPrice}}</view>
		</view>
		<!-- 订单信息 -->
		<view class="myOrder_info_box">
			<view class="myOrder_info">订单信息</view>
			<view class="myOrder_info_item">
				<view class="myOrder_info_num">
					<view>总价（积分）：</view>
					<view>{{formData.totalPrice}}</view>
				</view>
				<view class="myOrder_info_num">
					<view> 联系人：</view>
					<view>{{formData.recipientName}}</view>
				</view>
				<view class="myOrder_info_num">
					<view>联系电话：</view>
					<view>{{formData.recipientPhone}}</view>
				</view>
				<view class="myOrder_info_num">
					<view>地址 ：</view>
					<view>{{formData.recipientAddress}}</view>
				</view>
				<view class="myOrder_info_num">
					<view>给卖家留言：</view> 
					<view>{{formData.buyerMessage}}</view>
				</view>
			</view>
		</view>
		<!-- 物流信息 -->
		<view class="myOrder_info_box">
			<view class="myOrder_info">物流公司</view>
			<view class="myOrder_info_item">
				<view class="myOrder_info_num">
					<view>若快递公司未经您允许将包裹放置在智能快件箱(即自提柜)中，您有权拒收。</view>
				</view>
				<view class="myOrder_info_num">
					<view>物流公司 ：</view>
					<view>{{formData.logisticsCompany}}</view>
				</view>
				<view class="myOrder_info_num">
					<view>运单号码：</view>
					<view>{{formData.logisticsNumber}}</view>
				</view>
				<view class="myOrder_info_num">
					<view>发货联系方式：</view>
					<view>{{formData.logisticsPhone}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';

	export default {
		data() {
			return {
				formData: {},
				goods_pic: 'https://img2.baidu.com/it/u=612844894,2239973497&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500',

			};
		},

		onLoad(options) {
			this.getOrderDetails(options.id)
		},
		methods: {
			getOrderDetails(id) {
				request.get(`/redeemRecord/info/${id}`).then(res => {
					if (res.code === 0) {
						this.formData = res.data;
					} else {
						uni.$showMsg(res.msg)
					}
				});
			},
			winStatusFormat(item) {
				if (item.redeemStatus == 1) {
					return "已取消"
				}
				// item.deliveryStatus===0?'待发货':item.deliveryStatus===1?'已发货':item.deliveryStatus===2?'待支付':'待收货'
				switch (item.deliveryStatus) {
					case 0:
					return "待发货"
					case 1:
					return "待收货"
					case 2:
					return "待支付"
					case 3:
					return "已收货"
				}
			},
		},
		 
	}
</script>

<style lang="scss">
	.myorder_container {
		// background-color: #eeeeee;
		height: 100vh;
		font-size: 30rpx;

		.myorder_container_title {
			border-top: 1px solid #eeeeee;
			background-color: #fff;
			display: flex;
			color: #555555;
			padding: 10rpx 20rpx;
			line-height: 40rpx;
			justify-content: space-between;
			border-bottom: 1px solid #eeeeee;

			.myOrder_num {
				display: flex;

			}
		}

		.myorder_container_details {
			display: flex;
			line-height: 40rpx;
			padding: 10rpx 20rpx;
			justify-content: space-between;
			border-bottom: 1px solid #eeeeee;
			background-color: #fff;

			.storeDetail {
				font-size: 30rpx;
				font-weight: 400;
			}

			.storeGet {
				color: orange;
			}
		}

		.myorder_container_Pics {
			display: flex;
			padding: 10rpx 20rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eeeeee;
			background-color: #fff;

			.container_details {
				display: flex;

				.container_details_title {
					display: flex;
					flex-direction: column;

					.details_title {
						margin-top: 10rpx;
					}

					.details_result {
						margin-top: 15rpx;
						color: red;
						font-weight: 600;
						font-size: 28rpx;
					}
				}

				.pics {

					width: 100rpx;
					margin: 10rpx;
					height: 100rpx;

				}
			}
		}

		.myorder_container_total {
			display: flex;
			padding: 10rpx 20rpx;
			justify-content: flex-end;
			align-items: center;
			line-height: 40rpx;
			border-bottom: 1px solid #eeeeee;
			background-color: #fff;

			.myorder_total_title {
				font-size: 28rpx;
				color: #8a8686;
			}

			.myorder_total_num {
				font-size: 28rpx;
				color: red;
			}
		}

		.myOrder_info_box {
			padding: 10rpx 20rpx;
			background-color: #fff;
			border-top: 1px solid #eeeeee;

			.myOrder_info {
				font-size: 24rpx;
				font-weight: 600;
				line-height: 40rpx;
			}

			.myOrder_info_item {
				margin: 20rpx 0;

				.myOrder_info_num {
					display: flex;
					justify-content: space-between;
					margin-top: 5rpx;
				}
			}
		}
	}
</style>